new Vue({
  el: '#main',
  data: {
    unfold: true,
    startDate: '',
    endDate: '',
    aryField: [
      { value: 'operatingUser', name: '操作用户' },
      { value: 'operatedUser', name: '操作对象' },
    ], // 字段数据
    selectedFieldValue: '', // 字段值
    selectedFieldName: '', // 字段名，通过监视器获取
    queryValue: '', // 查询值
    fuzzy: false,
    logs: [
      {
        checked: false,
        EducationalState: '在校',
      },
      {
        checked: false,
        EducationalState: '业余',
      },
      {
        checked: false,
        EducationalState: '休学',
      },
      {
        checked: false,
        EducationalState: '退学',
      },
    ],
    // 分页数据
    currentPage: 1, // 当前分页（后台数据）
    totalPages: 10, // 总分页数（后台数据）
    showPages: 5, // 展示页数（后台数据）
    startPage: 0, // 起始页
    endPage: 0, // 末尾页
    aryPagination: [], // 分页显示按钮数组
  },
  methods: {
    toggle() {
      this.unfold = !this.unfold
    },
    initPagination() {
      // 分页数据初始化
      if (this.totalPages < this.showPages) {
        this.startPage = 1
        this.endPage = this.totalPages
      } else {
        let diff = Math.floor(this.showPages / 2)
        if (this.currentPage - diff < 1) {
          this.startPage = 1
          this.endPage = this.showPages
          return
        }
        if (this.currentPage + diff > this.totalPages) {
          this.startPage = this.totalPages - this.showPages + 1
          this.endPage = this.totalPages
          return
        }
        this.startPage = this.currentPage - diff
        this.endPage = this.currentPage + diff
      }
    },
    setPaginationBtn() {
      // 分页显示按钮初始化
      for (let i = this.startPage; i <= this.endPage; i++) {
        this.aryPagination.push({
          text: i,
          attr: this.currentPage == i ? ' active' : '',
          target: i,
        })
      }
      this.aryPagination.unshift({
        text: '上一页',
        attr: this.currentPage == this.startPage ? ' disabled' : '',
        target: this.currentPage > 1 ? this.currentPage - 1 : '',
      })
      this.aryPagination.push({
        text: '下一页',
        attr: this.currentPage == this.endPage ? ' disabled' : '',
        target: this.currentPage < this.totalPages ? this.currentPage + 1 : '',
      })
    },
    setDefaultSelected() {
      // 设置单选框初始默认选中
      this.selectedFieldValue = this.aryField[0].value
    },
    query() {
      // 预留查询方法
      console.log(this)
    },
    exportInfo() {
      // 预留导出方法
    },
    setDate(e) {
      // 输入组有联动，阻止冒泡避免多次触发
      e.stopPropagation()
      // 向响应式对象动态更新数据
      this.$set(this, 'startDate', $('#startDate').val())
      this.$set(this, 'endDate', $('#endDate').val())
      // console.log($('#startDate').val(), $('#endDate').val())
    },
  },
  watch: {
    selectedFieldValue: {
      handler(newData) {
        this.selectedFieldName = this.aryField.find(
          (item) => item.value === newData
        ).name
        // console.log(this.selectedFieldName)
      },
    },
    currentPage: {
      handler() {
        this.setPaginationBtn()
      },
    },
    // bootstrap-datepicker组件 获取值测试
    // startDate(newData) {
    //   console.log(newData)
    // },
    // endDate(newData) {
    //   console.log(newData)
    // },
  },
  computed: {
    unfoldOrfold() {
      return this.unfold ? '收起' : '展开'
    },
    isAll: {
      get() {
        return this.logs.every((item) => item.checked)
      },
      set(value) {
        this.logs.forEach((item) => (item.checked = value))
      },
    },
  },
  created() {
    this.setDefaultSelected()
    this.initPagination()
    this.setPaginationBtn()
  },
})
